<template>
    <h1>HelloWorld</h1>
    <h3>counter:{{ counter }}</h3>
    <h3>doubleCounter:{{ doubleCounter }}</h3>
    <el-button @click="addCounter">counter++</el-button>
    <br />
    <el-button @click="replaceStore">替换state状态值</el-button>
      <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button round>Round</el-button>
    <el-button type="primary" round>Primary</el-button>
    <el-button type="success" round>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
  </el-row>

  <el-row>
    <el-button :icon="Search" circle />
    <el-button type="primary" :icon="Edit" circle />
    <el-button type="success" :icon="Check" circle />
    <el-button type="info" :icon="Message" circle />
    <el-button type="warning" :icon="Star" circle />
    <el-button type="danger" :icon="Delete" circle />
  </el-row>

   <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
  <div style="font-size: 20px">
    <!-- 由于SVG图标默认不携带任何属性 -->
    <!-- 你需要直接提供它们 -->
    <Edit style="width: 1em; height: 1em; margin-right: 8px" />
    <Share style="width: 1em; height: 1em; margin-right: 8px" />
    <Delete style="width: 1em; height: 1em; margin-right: 8px" />
    <Search style="width: 1em; height: 1em; margin-right: 8px" />
  </div>

    <el-text class="mx-1">Default</el-text>
  <el-text class="mx-1" type="primary">Primary</el-text>
  <el-text class="mx-1" type="success">Success</el-text>
  <el-text class="mx-1" type="info">Info</el-text>
  <el-text class="mx-1" type="warning">Warning</el-text>
  <el-text class="mx-1" type="danger">Danger</el-text>
  
</template>

<script setup lang='ts'>
import { storeToRefs } from "pinia";
import { useCounterStore } from "../store";
const counterStore = useCounterStore();
// 第一次改变store状态 $path对象形式
// const addCounter = () => {
//   counterStore.$patch({
//     counter: counterStore.counter + 1
//   })
// }
// 第二种修改store状态 $path 传递回调函数 第一个参数就是state
// const addCounter = () => {
//   counterStore.$patch((store) => {
//     store.counter++
//   })
// }
// 第三种修改store状态 直接通过store修改
// const addCounter = () => {
//   counterStore.counter++
// }
// 第四种修改store状态
const addCounter = () => {
    counterStore.addCounter();
};

// 访问state的状态两个方法
// !不能这样使用 因为丢掉了响应式
// const { counter, doubleCounter } = counterStore

// 一使用pinia自带的storeToRefs
const { counter, doubleCounter } = storeToRefs(counterStore);

// 二使用vue的computer 从store中读取
// const counter = computed(() => counterStore.counter)
// const doubleCounter = computed(() => counterStore.doubleCounter)

// 替换状态已有的属性值 相当于重新赋值而已
const replaceStore = () => {
    counterStore.$state = { counter: 20 };
};
</script>
